<template>
	<div class="book">
		<!-- book区域 -->
		<div class="book_header">
			<h3>商品列表</h3>
			<router-link to="bookedit">添加新的轮播图</router-link>
		</div>
		<table>
			<tr>
				<th>名称</th>
				<th>编号</th>
				<th>作者</th>
				<th>出处</th>
				<th>日期</th>
				<th>图片</th>
				<th>操作	</th>
			</tr>
			<tr v-for="item in bookList" :key="item.id">
				<td>{{item.name}}</td>
				<td>{{item.sn}}</td>
				<td>{{item.author}}</td>
				<td>{{item.publisher}}</td>
				<td v-html="filterTimes(item.tpublish)"></td>
				<td><img :src="`${$Imgurl}/api/public/showImg/${item.picture}`"></td>
				<td><button @click="update(item.id)">修改</button></td>
			</tr>
		</table>
		<div class="book_paging">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name : 'Book',
		data(){
			return {
				bookList : []
			}
		},
		created(){
			let that = this;
			this.axios.get( '/api/adm/book/findByPage/1/6' ).then( (res)=>{
				// console.log(res.data.data.books);
				if( res.data.code === 200 ){
					that.bookList = res.data.data.books;
				}
				// console.log(this.bookList);
			} ).catch( (error)=>{
				console.log(error);
			} )
		},
		computed:{
			filterTimes(){
				return (x)=>{
					// 获取当前系统时间戳
					let now = new Date(x)
					// 计算提取天数+小时+分钟+秒数
					let ynum = now.getFullYear();
					let mnum = now.getMonth()+1;
					let dnum = now.getDate();
					// 保证所有的输出都是俩位数
					if( mnum <= 9 ){
						mnum = '0'+mnum;
					}
					if( dnum <= 9 ){
						dnum = '0'+dnum;
					}
					return `${ynum}-<i>${mnum}-</i>-<i>${dnum}</i>`;
				}
			}
		},
		methods:{
			update(val){
				// console.log(val);
				this.$router.push( {
					path : '/adm/bookedit',
					query: {
						bookid : val
					}
				} );
				// console.log(this.bookList);
			}
		}
	}
</script>

<style scoped>
	.book{
		width: 100%;
		height: 100%;
		background-color: pink;
		position: relative;
	}
	.book .book_header{
		width: 100%;
		float: left;
	}
	.book .book_middle{
		width: 100%;
		float: left;
	}
	.book .book_header h3{
		width: 20%;
		line-height: 55px;
		font-size: 25px;
		text-align: center;
		cursor: pointer;
		float: left;
	}
	.book .book_header a{
		width: 20%;
		line-height: 55px;
		border-radius: 6px;
		border: 0;
		background-color: skyblue;
		margin-top: 2%;
		margin-right: 13%;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		color: black;
		float: right;
	}
	.book .book_header a:hover{
		background-color: red;
		color: gold;
	}
	.book table{
		width: 90%;
		margin: 0 auto;
		text-align: center;
		line-height: 55px;
		border: 2px dashed skyblue;
		font-size: 16px;
		cursor: pointer;
	}
	.book table tr th,.book table tr td{
		border: 2px dashed skyblue;
	}
	.book table button{
		width: 70%;
		line-height: 35px;
		border-radius: 6px;
		border: 0;
		font-size: 16px;
	}
	.book_bottom{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 25%;
		border-top: 5px dashed red;
	}
	.book table img{
		width: 3vw;
		height: 3vw;
		vertical-align: middle;
	}
	
	.book_paging{
		width: 25%;
		height: 55px;
		position: absolute;
		bottom: 35px;
		right: 0;
	}
	.book_paging ul{
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}
	.book_paging ul li{
		float: left;
		width: 60px;
		line-height: 55px;
		text-align: center;
		margin-left: 2%;
		border-radius: 6px;
		border: 0;
		background-color: orange;
		color: white;
		cursor: pointer;
		font-size: 18px;
		list-style: none;
	}
</style>
